<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../react18/react.development.js"></script>
    <script src="../../react18/react-dom.development.js"></script>
    <script src="../../react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class App extends React.Component {
        render() {
          const { time } = this.state;
          return (
            <div>
              <span>现在是{time}点</span>
              <br />
              <button onClick={this.click}>点击</button>
            </div>
          );
        }
        // React绑定事件，在虚拟DOM内某个元素直接添加 on修饰符，首字母大写
        // 当class定义的类里边的事件函数自我调用会触发严格模式，导致this指向undefined
        /* 
        解决办法 ：
          用变量接收上层this值
          箭头函数
        */
        //  一般写法 在类里面另外写一个箭头函数 然后在点击事件内调用

        click = () => {
          this.setState({
            time: this.state.time + 1,
          });
        };

        state = {
          time: 0,
        };
      }

      ReactDOM.createRoot(document.querySelector("#app")).render(<App />);
    </script>
  </body>
</html>
